<template>
  <section class="position-relative">
    <div id="map"></div>
    <div class="tableList position-absolute" v-if="isShow">
      <div class="tableList-head d-flex">
        <div :class="item.className" class="text-center" v-for="item in list">
          {{ item.name }}
        </div>
      </div>
      <div>
        <div class="tableList-body d-flex" v-for="(i, index) in mushList" @click="selectedBring(i, index)" :class="selectedClass(index)">
          <div :class="item.className" class="text-center text-white" v-for="item in list">
            {{ i[item.key] }}
          </div>
        </div>
      </div>
      <div class="closeIcon" @click="closeDialog">
        <el-icon :size="24" color="#ffffff" class="no-inherit">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="today-detail text-white">
      <div class="today-desc">当日概况</div>
      <div class="today-desc">育菇房：正常 {{ bringAllData.lenNormal }}个 异常 {{ bringAllData.warnNormal }}个</div>
      <div class="out-house">出库： 当日{{ todayTotal }}公斤，累计{{ total }}公斤</div>
      <div class="warn-house">设备报警次数： 0次，处理0次</div>
    </div>
    <!-- <div class="data-detail text-white" @click="openDetail">详情</div> -->
  </section>
</template>
<script lang="ts" setup>
import factory from '../api/factory';
import { onMounted, ref } from 'vue';
import iconImage from './../assets/555.png';
import mushroomout from '../api/mushroom';
import eventEmitter from '@/util/listener';
import outWarehouse from '@/api/outWarehouse';
import { TodayFormatZero } from '@/util/timer';
let listSymbol = ref([]);
let markList = ref([]);
let factoryBuildingCode = ref('');
let isShow = ref(false);
let list = ref([
  {
    name: '菇房编号',
    className: 'bring1',
    key: 'code',
  },
  {
    name: '入库时间',
    className: 'bring2',
    key: 'createTime',
  },
  {
    name: '物候期',
    className: 'bring3',
    key: 'stage',
  },
  {
    name: '环境状态',
    className: 'bring4',
    key: 'status',
  },
]);
let selectedIndex = ref(-1);
onMounted(() => {
  var map = new AMap.Map('map', {
    // viewMode: '2D',
    // zoom: 4, //初始化地图层级
    layers: [new AMap.TileLayer.Satellite()],
    dragEnable: false, //初始化地图中心点
    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
    zoom: 18, //初始化地图层级
    center: [117.842972, 34.066119], //初始化地图中心点
  });
  AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
    getFactoryList().then(() => {
      markList.value = [];
      console.log(map.getCenter(), 'mapCenter');
      listSymbol.value.forEach((item: any) => {
        var marker = new AMap.Marker({
          map: map,
          icon: iconImage,
          zIndex: 9999999,
          title: item.code,
          extData: item.value,
          position: [Number(item.lon), Number(item.lat)],
        });
        marker.on('click', function () {
          isShow.value = true;
          factoryBuildingCode.value = item.code;
          selectedIndex.value = -1;
          getMushroom();
        });
        marker.setLabel({
          direction: 'top',
          offset: new AMap.Pixel(-7, -20), //设置文本标注偏移量
          content: `<div class='info text-white'>
            <div class='triangle info-triangle'></div>
            ${item.code}</div>`, //设置文本标注内容
        });
        // markList.value.push(marker);
      });
    });
    // var marker = new AMap.Marker({
    //   map: map,
    //   zIndex: 9999999,
    //   position: map.getCenter(),
    // });

    // var infoWindow = new SimpleInfoWindow({
    //   myCustomHeader: '我的header',
    //   myCustomFooter: '我的footer',
    //   infoTitle: '<strong>这里是标题</strong>',
    //   infoBody: '<p class="my-desc"><strong>这里是内容。</strong></p>',

    //   //基点指向marker的头部位置
    //   offset: new AMap.Pixel(0, -31),
    // });

    // function openInfoWin() {
    //   infoWindow.open(map, marker.getPosition());
    // }

    //marker 点击时打开
    // marker.on('click', function () {
    //   openInfoWin();
    // });

    // openInfoWin();
  });
});
let mushList: any = ref([]);
async function getMushroom() {
  let data = await mushroomout.mushroomoutList({ current: 1, size: 99, factoryBuildingCode: factoryBuildingCode.value });
  mushList.value = data.data.data.records;
}
async function getFactoryList() {
  let data = await factory.factoryBuildingList({ current: 1, size: 20 });
  listSymbol.value = data.data.data.records;
}
const selectedClass = (index) => {
  return {
    selectedItem: index == selectedIndex.value,
  };
};
const selectedBring = (item, index) => {
  selectedIndex.value = index;
  eventEmitter.emit('event', item.code);
};
const closeDialog = () => {
  isShow.value = false;
};
let bringAllData: any = ref({});
getAllBringData();
async function getAllBringData() {
  let data = await mushroomout.mushroomoutList({ current: 1, size: 9999 });
  let records = data.data.data.records;
  let lenNormal = 0;
  let warnNormal = 0;
  records.forEach((item) => {
    if (item.status === '正常') {
      lenNormal++;
    } else {
      warnNormal++;
    }
  });
  bringAllData.value.lenNormal = lenNormal;
  bringAllData.value.warnNormal = warnNormal;
}
let isOpenDetail = ref(false);

let total = ref(0);
AllData();
async function AllData() {
  let data = await outWarehouse.outWarehouseList({ current: 1, size: 9999 });
  let records = data.data.data.records;
  total.value = records.reduce((memo, current) => {
    return memo + current.outWarehouseWeight;
  }, 0);
}

let todayTotal = ref(0);
todayTotalM();
async function todayTotalM() {
  // 2022-10-05 00:00:00
  let outWarehouseTime = TodayFormatZero(Date.now());
  let data = await outWarehouse.outWarehouseList({ current: 1, size: 9999, outWarehouseTime });
  let records = data.data.data.records;
  todayTotal.value = records.reduce((memo, current) => {
    return memo + current.outWarehouseWeight;
  }, 0);
}
//factoryBuildingCode
</script>
<style lang="scss" scoped>
#map {
  width: 937px;
  height: 579px;
}
.selectedItem {
  background: rgba(245, 181, 80, 1);
}
</style>
<style>
.info {
  width: 50px;
  height: 40px;
  background: #081d4e;
  opacity: 0.8;
  border-radius: 8px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}
.amap-marker-label {
  border: 1px solid transparent;
  background-color: transparent;
}

.bring1 {
  width: 63px;
}
.bring2 {
  width: 173px;
}
.bring3 {
  width: 127px;
}
.bring4 {
  width: 133px;
}
.tableList {
  width: 400px;
  left: 0;
  bottom: 0;
  margin: 0 0 10px 10px
}
.tableList-head {
  height: 30px;
  background: #192e4e;
  color: rgba(230, 230, 230, 0.5);
  font-size: 14px;
  line-height: 30px;
}
.tableList-body {
  background: #173064;
  opacity: 0.8;
  cursor: pointer;
}
.tableList-body * {
  height: 30px;
  line-height: 30px;
}
.closeIcon {
  position: absolute;
  right: 0px;
  top: 3px;
  cursor: pointer;
}
.today-detail {
  height: 166px;
  background: #081d4e;
  opacity: 0.8;
  padding: 8px 15px 0px 13px;
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 16px;
  font-weight: bold;
}
.today-desc {
  line-height: 34px;
  height: 34px;
}
.bring-house {
  line-height: 36px;
  height: 36px;
}
.out-house {
  line-height: 46px;
  height: 46px;
  white-space: nowrap;
}
.warn-house {
  line-height: 38px;
  height: 38px;
}
.data-detail {
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
